<!-- 
    url:https://autumnfish.cn/

 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>musicPlayer</title>
    <script src="js/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="CSS/music.css">
</head>

<body>
    <div class="wrap" id="app">
        <!-- 播放器主体 -->
        <div class="player_wrap">
            <!-- 顶部 -->
            <div class="searchbar">
                <img src="images/player_title.png" alt="">
                <!-- 搜索框 -->
                <input type="text" @keyup.enter="searchMusic" v-model="searchMessage">
                <a href="javascript:;" @mouseup="searchMusic"></a>
            </div>
            <!-- 中间主体 -->
            <div class="center_con">
                <!-- 歌曲 -->
                <div class="song_wraper">
                    <ul class="song_list">
                        <li v-for="(item,index) in songsMessage">
                            <a href="javascript:;" @dblclick="playMusic(index)" :key="index"></a>
                            <b>{{item.name}}</b>
                            <span v-show="mvIdList[index]" @click="playMv(index)"></span>
                        </li>
                    </ul>
                </div>
                <!-- 封面 -->
                <div class="player_con">
                    <img :class="{back:!isPaused}" src="images/player_bar.png" alt="">
                    <img class="rotating" :class="{pause:isPaused}" src="images/disc.png" alt="">
                    <img class="rotating" :class="{pause:isPaused}" :src="picUrl" alt="">
                </div>
                <!-- 评论 -->
                <div class="comment_wraper">
                    <h3>热门留言</h3>
                    <ul class="comment_list">
                        <li v-for="(item,index) in commentsContent">
                            <img :src="commentsPic[index]" alt="">
                            <p>{{item}}</p>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- 音频 -->
            <div class="audio_con">
                <audio :src="audioUrl" :autoplay="isAutoPlay" controls="controls" @pause="setPause" @play="setPlay"
                    @ended="playNextMusic"></audio>
            </div>
            <!-- MV -->
            <div class="video_con" v-show="isPlayingMv">
                <video :src="mvUrl" controls="controls" ref="video"></video>
            </div>

        </div>
        <!-- 遮罩层 -->
        <div class="mask" v-show="isPlayingMv" @click="closeMv"></div>
    </div>


</body>
<script src="js/music.js"></script>

</html>